Refactoring with Hooks

React の強みは、Web アプリケーションを Component と呼ばれる個々のユニットで表現できる点

ただし、どのロジックをどの Component に割り当てるべきかのルールは明確でない

が、各コンポーネントが 1 つの仕事だけを行うように設計するのが良いとされる

小さな単位に保つのが大切

この「1 つの仕事」かどうかは人間の直感に依存するので、自動的に判別できない

しかし、この考え方を持つことでコードの管理がしやすくなる

Component は、責任が増えて複雑になればなるほど管理が大変になる

複雑な Component をどう分割するか

1st edition では HOC Pattern を用いた

しかし、代替手段として React Hooks が出てきたので 2nd edition ではこちらを用いる

具体例

React DevTools を用いて、以下の手順でデバッグすると良い

1. 予期しない出力をレンダリングしているコンポーネントから調べる

2. 問題は Props の値にあるので、その Props を渡している上位コンポーネントに移動し、問題を引き起こしている部分を探す

3. そのコンポーネントに対して単体テストを書きながら問題を特定し、修正する